<template>
	<!-- 底部显示的标签 -->
	<view
		class="flex flex-between"
		:class="[props.direction == 'vertical' ? 'flex-col' : 'flex-row']"
		:style="[props.direction == 'horizontal' ? { width: width + 'rpx' } : { height: height + 'rpx' }]"
	>
		<view
			v-if="props.direction == 'horizontal'"
			class="flex flex-row"
			style="width: 80rpx"
			:class="[
				index == 0 ? 'flex-row-top-start' : '',
				index == _stepArray.length - 1 ? 'flex-row-top-end' : '',
				index < _stepArray.length - 1 && index > 0 ? 'flex-row-top-center' : ''
			]"
			v-for="(item, index) in _stepArray"
			:key="index"
		>
			<tmText :font-size="24" :label="item"></tmText>
		</view>
		<view
			v-if="props.direction != 'horizontal'"
			class="flex flex-row flex-row-center-start"
			style="width: 80rpx"
			v-for="(item, index) in _stepArray"
			:key="index"
		>
			<tmText :font-size="24" :label="item"></tmText>
		</view>
	</view>
</template>
<script lang="ts" setup>
import tmText from '../tm-text/tm-text.vue'
import { computed } from 'vue'
const props = defineProps({
	/**
	 * 方向
	 * horizontal:水平,
	 * vertical:竖向。
	 */
	direction: {
		type: String,
		default: 'horizontal'
	},
	width: {
		type: Number,
		default: 0
	},
	height: {
		type: Number,
		default: 0
	},
	max: {
		type: Number,
		default: 100
	},
	min: {
		type: Number,
		default: 0
	},
	step: {
		type: Number,
		default: 0
	},
	size: {
		type: Number,
		default: 32
	}
})

const _stepArray = computed(() => {
	let label = []
	if (props.step == 0) return []
	// if(props.step==1) return [props.min,props.max]
	let _step = props.max / props.step
	for (let i = 1; i <= props.step; i++) {
		label.push(i * _step)
	}
	return [props.min, ...label]
})
</script>
